<template>
	<div class="container">
		<div class="header">
			<h2>计算器</h2>
		</div>
		<el-form ref="form" v-model="form" label-width="80px" class="main">
			<!-- 输入数量开始 -->
			<el-form-item label="输入数量">
				<el-input size="mini" v-model="form.count" placeholder="输入张数"></el-input>
			</el-form-item>
			<!-- 输入数量结束 -->
			<!-- 纸张尺寸开始 -->
			<el-form-item label="纸张尺寸">
				<el-select size="mini" v-model="form.size">
					<el-option v-for="item in init.size.item" :key="item.index" :value="item.name"></el-option>
				</el-select>
			</el-form-item>
			<!-- 纸张尺寸结束 -->
			<!-- 双面开始 -->
			<el-form-item label="是否双面">
				<el-radio-group v-model="form.shuangmian">
					<el-radio v-for="item in init.shuangmian.item" :key="item.index" :label="item.name"></el-radio>
				</el-radio-group>
			</el-form-item>
			<!-- 双面结束 -->
			<!-- 彩打开始 -->
			<el-form-item label="是否彩打">
				<el-radio-group v-model="form.caise">
					<el-radio v-for="item in init.caise.item" :key="item.index" :label="item.name"></el-radio>
				</el-radio-group>
			</el-form-item>
			<!-- 彩打结束 -->
			<el-form-item label="是否装订">
				<el-radio-group v-model="form.zhuangding">
					<el-radio label="是" @change="show=true"></el-radio>
					<el-radio label="否"></el-radio>
				</el-radio-group>
			</el-form-item>
			<!-- 最终价格 -->
			<el-form-item label="最终价格:">
				<span>{{result}}</span>
			</el-form-item>
			<!-- 最终价格结束 -->
			<!-- 自定义参数开始 -->
			<el-form-item class="item">
				<el-button type="primary" @click="showSet=true">自定义参数</el-button>
				<!-- 自定义参数结束 -->
			</el-form-item>
		</el-form>
		<!-- 临时数：{{num}} -->
		<!-- 装订类别模态框 -->
		<el-dialog :visible.sync="show" width="340px">
			<el-form :model="form">
				<!-- 装订类别 -->
				<el-form-item label="装订类型">
					<el-select v-model="form.dingType">
						<el-option v-for="item in init.zhuangding.item" :key="item.index" :value="item.name"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="show = false">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 参数设置模态框 -->
		<el-dialog :visible.sync="showSet" width="340px" title="后台参数设置">
			<div class="showSet">
				<!-- 单面价格 -->
				<div class="showSetson">
					<el-input placeholder="请输入内容" v-model="custom.danmian" id="userInput">
						<template slot="prepend">现单面价：{{this.init.shuangmian.item[0].price}}元/张</template>
					</el-input>
				</div>
				<!-- 双面价格 -->
				<div>
					<el-input placeholder="请输入内容" v-model="custom.shuangmian">
						<template slot="prepend">现双面格：{{this.init.shuangmian.item[1].price}}元/张</template>
					</el-input>
				</div>
				<!-- 彩打价格 -->
				<div>
					<el-input placeholder="请输入内容" v-model="custom.caise">
						<template slot="prepend">现彩打价：{{this.init.caise.item[0].price}}元/张</template>
					</el-input>
				</div>
				<!-- 黑白价格 -->
				<div>
					<el-input placeholder="请输入内容" v-model="custom.heibai">
						<template slot="prepend">现黑白价：{{this.init.caise.item[1].price}}元/张</template>
					</el-input>
				</div>
				<!-- 纸张尺寸开始 -->
				<div class="sizeMain">
					<span class="sizeTitle">
						尺寸列表:
					</span>
					<el-select v-model="form.size" class="sizeSel">
						<el-option v-for="item in init.size.item" :key="item.index" :value="item.name" style="border-bottom: 1px #DCDFE6 solid;"
						 class="a">
							<span style="float: left; color: #8492a6; font-size: 13px">{{item.name}}:  ({{item.price}}元/张)</span>
							<div class="editBtn">
								<button class=" el-icon-edit" @click="editData=true"></button>
								<button class=" el-icon-circle-close closeBtn" @click="delData"></button>
							</div>
						</el-option>
					</el-select>
				</div>
				<!-- 新建尺寸 -->
				<div>
					<el-button type="primary" class="newBtn" @click="createSize=true">新建纸张尺寸类型</el-button>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="showSetF">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog :visible.sync="createSize" title="新建尺寸" width="30%">
			<div class="inputGroup">
				<span>名称: </span>
				<el-input type="text" v-model="createSizeData.name"></el-input>
			</div>
			<div class="inputGroup">
				<span>价格: </span>
				<el-input type="text" v-model="createSizeData.price"></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="createSizeFn">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				showSet: false,
				editData: false,
				createSize: false,
				createSizeData: {
					name: '',
					price: ''
				},
				editFrom: {
					name: '',
					price: ''
				},
				custom: {
					// 单面单价
					danmian: '',
					// 双面单价
					shuangmian: '',
					//彩打单价
					caise: '',
					//黑白单价
					heibai: ''
				},
				form: {
					// 张数
					count: '',
					// 尺寸
					size: '',
					// 装订
					zhuangding: '',
					// 双面
					shuangmian: '',
					// 彩打
					caise: '',
					// 装订数量
					// 装订类别
					dingType: ''
				},
				setting: false,
				count: '',
				init: {
					size: {
						index: 0,
						item: []
					},
					shuangmian: {
						index: 0,
						item: [{
							index: 'danmian',
							name: '是',
							price: 0.1
						}, {
							index: 'shuangmian',
							name: '否',
							price: 0
						}]
					},
					caise: {
						index: 0,
						item: [{
							index: 'caise',
							name: '是',
							price: 1
						}, {
							index: 'heibai',
							name: '否',
							price: 0
						}]
					},
					zhuangding: {
						index: 0,
						item: [{
							name: '订书机',
							price: 0.5,
							max: 100
						}, {
							name: '胶装钉',
							price: 2,
							max: 250
						}, {
							name: '骑马钉',
							price: 5,
							max: 40
						}, {
							name: '打孔钉',
							price: 5,
							max: 100
						}]
					},
				}
			}
		},
		methods: {
			createSizeFn() {
				if (window.localStorage) {
					let newSize = {
						name: this.createSizeData.name,
						price: this.createSizeData.price
					}
					if (newSize.name == '' || newSize.price == '') {
						alert("数据是空的");
					} else {
						let newSizeJSON = JSON.stringify(newSize);
						localStorage.setItem(newSize.name, newSizeJSON);
						let arr = this.init.size.item;
						arr.push(newSize);
						this.createSizeData.name = null;
						this.createSizeData.price = null;
					}
					this.createSize = false;
				} else {
					alert("浏览器不支持本地存储");
				}
			},
			delData(e) {
				// 取消冒泡
				e.stopPropagation();
				// 获得当前选中li得文本
				var liText = e.path[2].innerText;
				// 找到要操作得数组，比较liText与要操作得数组的元素名是否相等，如果相等，删除他。
				let delItem = this.init.size.item;
				for (let i in delItem) {
					if (liText == delItem[i].name) {
						delItem.splice(i, 1);
					}
				}
				//遍历本地存储，如果选中的项于本地存储里的项匹配，则删除它。
				let len = localStorage.length;
				for (let i = 0; i < len; i++) {
					let getKey = localStorage.key(i);
					if (getKey == liText) {
						localStorage.removeItem(getKey);
					}
				}
			},
			showSetF() {
				this.showSet = false; //控制自定义参数的模态框显示隐藏
				let danmian = this.custom.danmian;
				let shuangmian = this.custom.shuangmian;
				let caise = this.custom.caise;
				let heibai = this.custom.heibai;
				// 单面价格
				let danmianPrice = this.init.shuangmian.item[0];
				if (isNaN(danmian)) {
					alert('输入类型错误');
				} else if (danmian == '') {
					danmianPrice.price = 0;
				} else {
					danmianPrice.price = Number(danmian);
					localStorage.setItem(danmianPrice.index, danmianPrice.price);
				}
				// 双面价格
				let setShuangmian = this.init.shuangmian.item[1];
				if (isNaN(shuangmian)) {
					alert('输入类型错误');
				} else if (shuangmian == '') {
					setShuangmian.price = 0;
				} else {
					setShuangmian.price = Number(shuangmian);
					localStorage.setItem(setShuangmian.index, setShuangmian.price);
				}
				// 彩色价格
				let setCaiSe = this.init.caise.item[0];
				if (isNaN(caise)) {
					alert('输入类型错误');
				} else if (caise == '') {
					setCaiSe.price = 0;
				} else {
					setCaiSe.price = Number(caise);
					localStorage.setItem(setCaiSe.index, setCaiSe.price);
				}
				// 黑白价格
				let setHeiBai = this.init.caise.item[1];
				if (isNaN(heibai)) {
					alert('输入类型错误');
				} else if (heibai == '') {
					setHeiBai.price = 0;
				} else {
					setHeiBai.price = Number(heibai);
					localStorage.setItem(setHeiBai.index, setHeiBai.price);
				}
			},

		},
		computed: {
			result: function() {
				let _size = this.form.size; //用户输入得纸张尺寸
				let sizeArr = this.init.size.item; //后台得设置得纸张尺寸
				let sizePrice; //匹配后得纸张类型价格
				let caiseArr = this.init.caise.item; //后台得设置得彩打参数
				let _caise = this.form.caise; //用户选择得彩打
				let caisePrice; //匹配后得彩打价格
				let _count = Number(this.form.count); //用户输入得纸张数量
				let zhuagndingArr = this.init.zhuangding.item; //后台设置得装订参数
				let zhuangdingType = this.form.zhuangding;
				let _zhuangding = this.form.dingType; //用户输入得装订类型
				let zhuangdingPrice; //匹配装订类型后得价格
				let shuangmianArr = this.init.shuangmian.item; //后台设置得双面参数
				let _shuangmian = this.form.shuangmian; //用户输入得双面类型
				let shuangmianPrice; //匹配双面类型后得价格
				let resultPrice; //最终价格
				// 计算出来的尺寸价格
				for (let item of sizeArr) {
					if (_size == item.name) {
						sizePrice = _count * item.price;
					}
				}
				// 计算出来的彩打价格
				for (let item of caiseArr) {
					if (_caise == item.name) {
						caisePrice = _count * item.price;
					}
				}
				// 计算出来的装订价格
				for (var item of zhuagndingArr) {
					if (_zhuangding == item.name) {
						var countMax = Math.ceil(_count / item.max); //能定多少本
						zhuangdingPrice = item.price * countMax;
					}
				}
				// 计算出来的双面价格
				for (let item of shuangmianArr) {
					if (_shuangmian == item.name) {
						shuangmianPrice = _count * item.price;
					}
				}
				// 如果选择不装钉，则装订价格为0；
				if (zhuangdingType == "否") {
					zhuangdingPrice = 0;
				}
				// 最终价格
				resultPrice = sizePrice + caisePrice + zhuangdingPrice + shuangmianPrice + "元";
				return resultPrice;
			},
		},
		mounted() {
			//挂载厚获取本地存储的长度，在获取vue实例的尺寸数组。遍历本地存储，把webpack 排除出去。然后逐个添加到尺寸里面区。
			let len = localStorage.length;
			let arr = this.init.size.item;
			for (let i = 0; i < len; i++) {
				var getKey = localStorage.key(i);
				if (getKey == 'loglevel:webpack-dev-server') {
					continue;
				} else if (getKey == 'danmian') {
					this.init.shuangmian.item[0].price = localStorage.getItem(getKey);
				} else if (getKey == 'shuangmian') {
					this.init.shuangmian.item[1].price = localStorage.getItem(getKey);
				} else if (getKey == 'caise') {
					this.init.caise.item[0].price = localStorage.getItem(getKey);
				} else if (getKey == 'heibai') {
					this.init.caise.item[1].price = localStorage.getItem(getKey);
				} else {
					let addItem = JSON.parse(localStorage.getItem(getKey));
					arr.push(addItem);
				}
			}
		}
	}
</script>
<style scoped>
	.container {
		border: 1px #333 solid;
		border-radius: .3125rem;
		background-color: #FFFAFF;
	}

	.header {

		text-align: center;
		margin-top: 1rem;
		font-size: 1.625rem;
	}

	.main {
		margin: 1rem 1.25rem;
	}

	.item {
		margin-left: 0.625rem;
	}

	.showSet>div {
		margin-top: 1.25rem;
	}

	.newBtn {
		width: 100%;
	}

	.sizeMain {
		display: flex;
	}

	.sizeTitle {
		background-color: #F5F7FA;
		color: #909399;
		width: 6.7rem;
		border: 1px #DCDFE6 solid;
		line-height: 2.3rem;
		text-align: center;
		border-radius: 0.3125rem 0 0 0.3125rem;
	}

	.sizeSel {
		border: 1px #DCDFE6 solid;
		border-radius: 0 0.3125rem 0.3125rem 0;
	}

	.showSetson {
		margin-top: 0;
	}

	.editBtn {
		float: right;
	}

	.editBtn>button {
		margin: 0 0.1875rem;
		border: none;
		background: #66B1FF;
		width: 1.1rem;
		height: 1.1rem;
		color: #fffaff;
	}

	.editBtn>button:hover {
		background-color: #F56C6C;
	}

	.inputGroup {
		display: flex;
		justify-content: space-between;
		margin: 0 0 0.625rem 0;
	}

	.inputGroup>span {
		width: 20%;
		line-height: 2.5rem;
		font-size: 16px;
		text-align: center;
	}
</style>
